Ext.ns('App.View');

App.View.PresetList = Ext.extend(Ext.Panel, {

	/**
	 * Init/Configure compentent of this view
	 *
	 * @return {component}
	 */
	initComponent: function() {
        
		var config = {
		
			layout: 'fit',
		
			dockedItems: [{
	            dock   : 'top',
	            xtype  : 'toolbar',
	            ui     : 'dark',
		        title  : 'Preset List',
	            items  : [{
                    xtype   : 'select',
                    name    : 'sort_by',
                    prependText: 'Group by:',
                    options: [
                        {text: 'Mapset',   value: 'mapset'  },
                        {text: 'Alphabet', value: 'alphabet'}
                    ],
                    listeners : {
                    	scope : this,
                        change: this.onTabSortChange
                    }
			    },{
			    	xtype   : 'spacer'
                },{
			    	text  : 'Edit',
		            handler : this.onTapButtonAction
			    }]
	        }],
	        
			items: [{
				id          : 'viewPresetList',
				xtype       : 'list',
				store       : 'presetStore',
		    	itemTpl: new Ext.XTemplate(
		    		'<tpl for="."><div class="presetListObj">',
						'<div class="presetGfx" style="background-image:url({presetGfx});"></div>',
							'<span class="presetName">{presetName}</span><br />',
							'<span class="presetTime">{presetMinutes}:{presetSeconds} min. total length</span><br />',
	                        '<ul class="counterSets">',
	        	                '<tpl for="counterSet">',
			                        '<li class="counterSetData {[this.listClasses(xindex, xcount)]}">"{counterName}" / {counterDuration}sec.</li>',
	                        	'</tpl>',
	                        '</ul>',
						'<div class="clearBoth"></div>',
					'</div></tpl>',
					{
					    listClasses: function(position, size) {
					    	var classes = [];
					    	if (position%2 === 0)  { classes.push("even")}
					    	else                   { classes.push("odd")};
					    	if (position === 1)    { classes.push("first")};
					    	if (position === size) { classes.push("last")};
					    	return classes.join(" ");
					    },
		    			compiled: true
				    }
			    ),
			    grouped     : true,
			    indexBar    : false,
	    		listeners   : {
	    			scope   : this,
	    			itemTap : this.onItemtapAction
	    		}
			}]
				
		};
		
		Ext.apply(this, config);
		App.View.PresetList.superclass.initComponent.call(this);
	},

	/**
	 * Event handler for List Entrys
	 *
	 * @param {Object} component   = Selected list entry, item componete
	 * @param {Object} index       = Selected list entry, item ID
	 * @param {Object} item        = Selected list entry, item propertys
	 * @param {Object} eventObject = Tab/Click event propertys
	 *
	 * @return {void}
	 */
	onItemtapAction: function(component, index, item, eventObject) {
		var dataset = component.store.getAt(index).data;
		App.fireEvent('setView', 'CounterList', 'slide', 'left', index, dataset);
		// pageTracker._trackPageview("/preset/"+Ext.DomQuery.selectNode('span.presetName', item).innerHTML+"/load-timer");
	},

	/**
	 * Event handler for Toolbar Bottons
	 *
	 * @param {Object} buttom = Propertys of the Tabbed/Clicked Button
	 * @param {Object} event  = Tab/Click event propertys
	 *
	 * @return {void}
	 */
	onTapButtonAction: function(button, event) {
		switch (button.text) {
			case 'Edit':
				App.fireEvent('setView', 'PresetListEdit', 'fade', '');
				break;
		}
	},

	/**
	 * Event handler for the "list-order select-box" of the list componente
	 *
	 * @param {Object} component = Propertys of the Tabbed/Clicked Entry
	 * @param {String} value     = Value of the Tabbed/Clicked Entry
	 *
	 * @return {void}
	 */
	onTabSortChange: function(component, value) {
		// this.store.sort(value, 'ASC');  //TODO: How to access the store?
    }
	
});

Ext.reg('App.View.PresetList', App.View.PresetList);
